<!DOCTYPE html>
<html>


	<!-- Mirrored from www.zi-han.net/theme/hplus/table_data_tables.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:20:01 GMT -->
	<head>

		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">


		<title>流程定义管理</title>
		<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
		<meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

		<link rel="shortcut icon" href="favicon.ico">
		<link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
		<link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">

		<!-- Data Tables -->
		<link href="css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">

		<link href="css/animate.min.css" rel="stylesheet">
		<link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">

		<style>
			.col-sm-2{
         width:12.666667%
      }





    </style>
	</head>

	<body class="gray-bg">
		<div class="wrapper wrapper-content animated fadeInRight">
			<div class="row">
				<div class="col-sm-12">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5 id="test">流程定义管理 <small>查看，查找，创建流程实例</small></h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="dropdown-toggle" data-toggle="dropdown" href="table_data_tables.html#">
									<i class="fa fa-wrench"></i>
								</a>
								<ul class="dropdown-menu dropdown-user">
									<li><a href="table_data_tables.html#">选项1</a>
									</li>
									<li><a href="table_data_tables.html#">选项2</a>
									</li>
								</ul>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<div class="row">
								<div class="col-sm-2" style="width:6%">
									<div class="input-group">
										<span class="input-group-btn">
											<button type="button" class="btn btn-sm btn-primary" onclick="MyProcessDef.methods.createProcess()">创建流程
											</button>
										</span>
									</div>
								</div>
								<div class="col-sm-2">
									<div class="input-group">
										<input type="text" class="input-sm form-control input-s-sm inline" id="name" placeholder="请输入名称" />
									</div>
								</div>
								<div class="col-sm-2">
									<div class="input-group">
										<input type="text" class="input-sm form-control input-s-sm inline" id="resourceName" placeholder="请输入资源名" />
										<span class="input-group-btn"><button type="button" class="btn btn-sm btn-primary" onclick="MyProcessDef.methods.tableRefresh()">
												搜索</button> </span>
									</div>
								</div>
							</div>

							<table class="table table-striped table-bordered table-hover dataTables-example">
								<thead>
									<tr>
										<th>ID</th>
										<th>名称</th>
										<th>key</th>
										<th>版本</th>
										<th>部署ID</th>
										<th>资源名</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>

						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/jquery.min.js?v=2.1.4"></script>
		<script src="js/bootstrap.min.js?v=3.3.6"></script>
		<script src="js/plugins/jeditable/jquery.jeditable.js"></script>
		<script src="js/plugins/dataTables/jquery.dataTables.js"></script>
		<script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
		<script src="js/content.min.js?v=1.0.0"></script>
		<script src="js/plugins/layui-v2.4.5/layui/layui.all.js"></script>
		<script src="js/common.js"></script>
		<script>
			var _table = "";
			$(document).ready(function() {
				_table = $('.dataTables-example').DataTable({
					responsive: true,
					serverSide: true,
					searching: false,
					bLengthChange: false,
					paging: false,
					sort: false,
					ajax: {
						url: 'http://localhost:8080/process/def/list',
						dataSrc: 'data',
						type: "GET",
						data: function(d) {
							d.name = $("#name").val();
							d.resourceName = $("#resourceName").val();
						}
					},
					language: {
						"sProcessing": "处理中...",
						"sLengthMenu": "显示 _MENU_ 项结果",
						"sZeroRecords": "没有匹配结果",
						"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
						"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
						"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
						"sInfoPostFix": "",
						"sSearch": "过滤:",
						"sUrl": "",
						"sEmptyTable": "表中数据为空",
						"sLoadingRecords": "载入中...",
						"sInfoThousands": ",",
						"oPaginate": {
							"sFirst": "首页",
							"sPrevious": "上页",
							"sNext": "下页",
							"sLast": "末页"
						},
						"oAria": {
							"sSortAscending": ": 以升序排列此列",
							"sSortDescending": ": 以降序排列此列"
						}
					},
					columns: [{
							"data": "id"
						},
						{
							"data": "name"
						},
						{
							"data": "key"
						},
						{
							"data": "version"
						},
						{
							"data": "deploymentId"
						},
						{
							"data": "resourceName"
						},
						//预留操作位
						{
							"data": "operate"
						}
					],
					columnDefs: [{
							// 所有的列不允许搜索
							"orderable": false,
							"targets": "_all"
						},
						{
							// 最后一列 不可过滤搜索
							"targets": -1,
							"render": function(val, b, row, d) {
								return '<a processDefinitionId="' + row.id +
									'" onclick="MyProcessDef.methods.createProcessInstance(this)" onmouseover="common.btnDesc(this)"  btnDesc="创建流程实例"><span class="fa fa-paper-plane-o" aria-hidden="true" style="color:#1ab394"></span></a>'
									+'&nbsp;&nbsp;<a deploymentId="' + row.deploymentId + '" onclick="MyProcessDef.methods.delete(this)" onmouseover="common.btnDesc(this)" btnDesc="删除流程"><span class="fa fa-remove" aria-hidden="true" style="color:#9a9494"></span></a>';
							}
						}
					],
				});
			});



			var MyProcessDef = {
				data: {
					assigneeWithPushMsgs: []
				},
				methods: {
					tableRefresh: function() {
						_table.ajax.reload();
					},
					createProcessInstance: function(_this) {
						var processDefinitionId = $(_this).attr("processDefinitionId");
						var data = {
							id: processDefinitionId
						}
						common.server.get('http://localhost:8080/common/process/start', data);
					},
					createProcess: function() {
						common.server.get('http://localhost:8080/process/file/name',null, function(res){
							if(res.code==200){
								var content="<select class='form-control'style='width:200px;margin:10px' id='msg'><option value=''>请选择文件名</option>";
								var data=res.data;
								$.each(data,function(i,item){
									content=content+"<option>"+item+"</option>";
								});
								content+="</select>";
								layer.open({
									id: 1,
									type: 1,
									title: '请输入流程文件名',
									content:content,
									btn: ['保存', '取消'],
									yes: function(index, layero) {
										debugger
										var msg = $("#msg").val();
										if (!msg) {
											common.msg.error("请输入流程文件名！");
											return;
										}
										layer.close(index);
										common.server.post('http://localhost:8080/process/deploy/' + msg, null,function(res){
											if(res.code==200){
												MyProcessDef.methods.tableRefresh();
												common.msg.success(res.msg);
											}
										
										});
									}
								});
							}
						});
					},
					delete: function(_this) {
						layer.confirm('确认要删除吗？', {
							btn: ['确定', '取消'] 
						}, function(index) {
							layer.close(index);
							var deploymentId = $(_this).attr("deploymentId");
							common.server.delete('http://localhost:8080/process/delete/' + deploymentId,null,function(res){
								MyProcessDef.methods.tableRefresh();
								common.msg.success(res.msg);
							});
						});
					}
				}
			}
		</script>

	</body>
</html>
